import type { EChartsOption } from "echarts";
import echarts from "../chartHooks/echarts";

export const RightCenterConfig = (xData: any, yData: any): EChartsOption => {
  const xData2 = yData.map((item: number) => +item + 10);
  return {
    title: {
      textStyle: {
        align: "center",
        color: "#fff",
        fontSize: 20,
      },
      top: "5%",
      left: "center",
    },
    tooltip: {
      trigger: "axis",
      // backgroundColor: "rgba(84,112,198,0.71)",
    },
    // tooltip: {
    //   trigger: "axis",
    //   axisPointer: {
    //     lineStyle: {
    //       color: {
    //         x: 0,
    //         y: 0,
    //         x2: 0,
    //         y2: 1,
    //         colorStops: [
    //           {
    //             offset: 0,
    //             color: "rgba(0, 255, 233,0)",
    //           },
    //           {
    //             offset: 0.5,
    //             color: "rgba(255, 255, 255,1)",
    //           },
    //           {
    //             offset: 1,
    //             color: "rgba(0, 255, 233,0)",
    //           },
    //         ],
    //         global: false,
    //       },
    //     },
    //   },
    // },
    grid: {
      top: "5%",
      left: "5%",
      right: "5%",
      bottom: "5%",
      // containLabel: true
    },
    xAxis: [
      {
        type: "category",
        axisLine: {
          show: true,
        },
        axisLabel: {
          color: "#fff",
        },
        splitLine: {
          show: false,
        },
        boundaryGap: false,
        data: ["A", "B", "C", "D", "E", "F"],
      },
    ],

    yAxis: [
      {
        type: "value",
        min: 0,
        // max: 140,
        splitNumber: 4,
        splitLine: {
          show: true,
          lineStyle: {
            color: "rgba(255,255,255,0.1)",
          },
        },
        axisLine: {
          show: false,
        },
        axisLabel: {
          show: false,
          margin: 20,
        },
        axisTick: {
          show: false,
        },
      },
    ],
    series: [
      {
        name: "注册总量",
        type: "line",
        // smooth: true, //是否平滑
        showAllSymbol: true,
        // symbol: 'image://./static/images/guang-circle.png',
        symbol: "circle",
        symbolSize: 25,
        lineStyle: {
          color: "#6c50f3",
          shadowColor: "rgba(0, 0, 0, .3)",
          shadowBlur: 0,
          shadowOffsetY: 5,
          shadowOffsetX: 5,
        },
        label: {
          show: true,
          position: "top",
        },
        itemStyle: {
          color: "#6c50f3",
          borderColor: "#fff",
          borderWidth: 3,
          shadowColor: "rgba(0, 0, 0, .3)",
          shadowBlur: 0,
          shadowOffsetY: 2,
          shadowOffsetX: 2,
        },
        tooltip: {
          show: false,
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: "rgba(108,80,243,0.3)",
              },
              {
                offset: 1,
                color: "rgba(108,80,243,0)",
              },
            ],
            false
          ),
          shadowColor: "rgba(108,80,243, 0.9)",
          shadowBlur: 20,
        },
        data: xData2,
      },
      {
        name: "注册总量",
        type: "line",
        // smooth: true, //是否平滑
        showAllSymbol: true,
        // symbol: 'image://./static/images/guang-circle.png',
        symbol: "circle",
        symbolSize: 25,
        lineStyle: {
          color: "#00ca95",
          shadowColor: "rgba(0, 0, 0, .3)",
          shadowBlur: 0,
          shadowOffsetY: 5,
          shadowOffsetX: 5,
        },
        label: {
          show: true,
          position: "top",
        },

        itemStyle: {
          color: "#00ca95",
          borderColor: "#fff",
          borderWidth: 3,
          shadowColor: "rgba(0, 0, 0, .3)",
          shadowBlur: 0,
          shadowOffsetY: 2,
          shadowOffsetX: 2,
        },
        tooltip: {
          show: false,
        },
        areaStyle: {
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            0,
            1,
            [
              {
                offset: 0,
                color: "rgba(0,202,149,0.3)",
              },
              {
                offset: 1,
                color: "rgba(0,202,149,0)",
              },
            ],
            false
          ),
          shadowColor: "rgba(0,202,149, 0.9)",
          shadowBlur: 20,
        },
        data: yData,
      },
    ],
  };
};
